<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>wangEditor 菜单和编辑器区域分离</title>
		<style type="text/css">
			.toolbar {
				border: 1px solid #ccc;
			}
			
			.text {
				border: 1px solid #ccc;
				height: 400px;
			}
		</style>
	</head>

	<body>
		<div id="div1" class="toolbar">
		</div>
		<div style="padding: 5px 0; color: #ccc">中间隔离带</div>
		<div id="div2" class="text">
			<!-- 可使用 min-height 实现编辑区域自动增加高度 -->
			<p>请输入内容</p>
		</div>

		<p></p>
		<button id="btn1">预览</button>
		<button id="btn2">清空</button>
		<button id="btn3">提交</button>

		<div id="div3" class="min-height">

		</div>

		<script type="text/javascript" src="./static/jquery.js"></script>
		<script type="text/javascript" src="./static/wangEditor.min.js"></script>
		<script type="text/javascript">
			var E = window.wangEditor
			var editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器

			// 自定义菜单配置
			editor.customConfig.menus = [
				'head', // 标题
				'bold', // 粗体
				'fontSize', // 字号
				'fontName', // 字体
				'italic', // 斜体
				'underline', // 下划线
				'strikeThrough', // 删除线
				'foreColor', // 文字颜色
				'backColor', // 背景颜色
				'link', // 插入链接
				'list', // 列表
				'justify', // 对齐方式
				'quote', // 引用
				'emoticon', // 表情
				'image', // 插入图片
				'table', // 表格
				//				'video', // 插入视频
				'code', // 插入代码
				'undo', // 撤销
				'redo' // 重复
			]

			editor.customConfig.zIndex = 1

			editor.customConfig.uploadImgShowBase64 = true

			editor.create()

			$("#btn1").click(function() {
				// 预览
				$("#div3").html(editor.txt.html())

			})

			$("#btn2").click(function() {
				// 清空
				editor.txt.clear() //清空编译器
				$("#div3").html(editor.txt.html())
			})

			$("#btn3").click(function() {
				// 提交
				//一般使用这个获取数据，通过ajax发送给服务端　，然后服务端以Ｓtring接收，保存到数据
				alert(editor.txt.text())
				alert(editor.txt.html()) //带样式
			})
		</script>

	</body>

</html>

<!--     		document.getElementById('btn1').addEventListener('click', function () {
    						// 读取 html
    						//alert(editor.txt.html())
    						//editor.txt.clear()
    						alert(editor.txt.html())
    		
    		}, false)
    		    
    		
    		document.getElementById('btn2').addEventListener('click', function () {
    			// 清空
    			editor.txt.clear()//清空编译器
    		}, false)
    		    
    		document.getElementById('btn3').addEventListener('click', function () {
    			// 提交
    						//一般使用这个获取数据，通过ajax发送给服务端　，然后服务端以Ｓtring接收，保存到数据
    			alert(editor.txt.text())
    		}, false) -->